//瀑布流初始化代码
$(".grid").masonry({
    itemSelector:".grid-item",//告诉瀑布流框架如何选择到每个元素
    columnWidth:210  //设置瀑布流每一列的总宽度(元素宽度200+间距10)
})


//创建和作品相关的vue对象
let grid_vm = new Vue({
    el:".grid",
    data:{
        product_arr:[{imgurl:"images/a.jpg"},{imgurl:"images/b.jpg"}]
    },
    created:function () {
        if(location.search.indexOf("wd")!=-1){ //说明是点击了搜索
            //得到搜索的关键字
            let wd = location.search.split("=")[1];
            //发出搜索请求
            axios.get("/search?wd="+wd).then(function (response) {
                grid_vm.product_arr = response.data;
                grid_vm.layout();
            }).catch(function (err) {
                alert(err)
            })
            return;
        }
        if(location.search.indexOf("cid")!=-1){ //说明点击了某个分类
            //得到分类id
            let cid = location.search.split("=")[1];
            axios.get("/productlistbyid?cid="+cid).then(function (response) {
                grid_vm.product_arr = response.data;
                grid_vm.layout();
            });
            return;
        }
        //发出请求获取数据库中所有作品数据
        axios.get("/productlist").then(function (response) {
            grid_vm.product_arr = response.data;
            //调用自定义方法
            grid_vm.layout();
        }).catch(function (err) {
            alert(err);
        })
    },
    methods:{
        layout:function () {
            //让瀑布流进行初始化操作
            //图片加载完成时 让瀑布流框架刷新布局 解决图片层叠问题
            $(".grid").imagesLoaded().progress(function () {
                //瀑布流初始化代码
                $(".grid").masonry({
                    itemSelector:".grid-item",//告诉瀑布流框架如何选择到每个元素
                    columnWidth:210  //设置瀑布流每一列的总宽度(元素宽度200+间距10)
                })
                //给所有瀑布流中的元素添加鼠标移入移出
                $(".grid-item").hover(function () {
                    //得到移入瀑布流元素div时 获取里面的蓝条div 让其停止没有做完的动画 做淡入动画
                    $(this).children("div").stop().fadeIn(500);
                },function () {
                    $(this).children("div").stop().fadeOut(500);
                })
            });
        }
    }
})














